<%@ page import="com.atguigu.service.*" %>
<%@ page import="com.atguigu.service.impl.*" %>
<%@ page import="com.atguigu.pojo.TomcatAndHeartbeatServiceConfig" %>
<%@ page import="com.atguigu.utils.WebUtils" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/pages/common/headAndWelcome.jsp" %><%--静态引用,包括项目起始点,和css,jquery等头部信息 --%>
<title>${server.name}${service.name}的内部配置</title>

<div class="container-fluid "> <!--table行-->

    <div class="">
        <h1 class="text-center">${server.name}/<span class="uppercase">${service.name}</span> service配置页面:<span class="red">proxy</span>&nbsp&nbsp(空闲端口号:${server.freePorts})</h1>
        <table class="table table-striped table-bordered table-hover nginxProxy" style="table-layout:inherit">
            <thead>
                <tr>
                <!--<th><input type="checkbox" id="selectall"> 全选</th>-->
                <th class="col-md-1 "><input type="checkbox" onchange="selectall(this)"> 全选</th>
                <th class="col-md-1">编号</th>
                <th class="col-md-1  hidden">服务器名</th>
                <th class="col-md-1  hidden">服务名</th>
                <th class="col-md-1">前端地址</th>
                <th class="col-md-3" title="这是一个后端服务实例的表象">后端地址</th>
                <th class="col-md-1" title="先不拆分了">用途</th>
                <th class="col-md-1 text-center detail ">操作</th>
            </tr>
            </thead>
            <tbody>
                <c:forEach items="${requestScope.nginxServiceConfigProxies}" var="nginxServiceConfigProxy" varStatus="nginxServiceConfigProxyStatus">
                    <tr class="tr">
                        <td>
                            <input type="checkbox">
                            <span class="number">${nginxServiceConfigProxyStatus.count}</span>
                        </td>
                        <td class="id">${nginxServiceConfigProxy.id}</td>
                        <td class="serverName  hidden">${serverService.queryServerById(nginxServiceConfigProxy.serverId).name}</td>
                        <td class="serviceName  hidden">${serviceService.queryServiceById(nginxServiceConfigProxy.serviceId).name}</td>
                        <td class="front"> <input type="text" class="form-control frontInput" value="${nginxServiceConfigProxy.frontDomain}:${nginxServiceConfigProxy.frontPort}"></td>
                        <td class="end">
                            <div class=" col-md-3 row">
                                <select name="projectModuleTypeId" class="form-control projectModuleTypeId">
                                    <c:forEach items="${requestScope.projectModuleTypes}" var="projectModuleType" varStatus="projectModuleTypeStatus">
                                        <option value="${projectModuleType.id}"
                                                <c:if test="${nginxServiceConfigProxy.projectModuleTypeId==projectModuleType.id}">selected="selected"</c:if>
                                        >${projectModuleType.name}</option>
                                    </c:forEach>
                                </select>
                            </div>
                            <div class=" col-md-3 row">
                                <c:set var="projects" value="${requestScope.projectService.queryProjectsByModuleTypeId(nginxServiceConfigProxy.projectModuleTypeId)}"></c:set>
                                <select name="projectId" class="form-control projectId">
                                    <c:forEach items="${projects}" var="item" varStatus="itemStatus">
                                        <option value="${item.id}"
                                                <c:if test="${nginxServiceConfigProxy.projectId==item.id}">selected="selected"</c:if>
                                        >${item.name}</option>
                                    </c:forEach>
                                </select>
                            </div>
                            <div class=" col-md-3 row">
                                <c:set var="projectModules" value="${requestScope.projectModuleService.queryProjectModulesByProjectIdAndProjectModuleTypeId(nginxServiceConfigProxy.projectId,nginxServiceConfigProxy.projectModuleTypeId)}"></c:set>
                                <select name="projectModuleId" class="form-control projectModuleId">
                                    <c:forEach items="${projectModules}" var="item" varStatus="itemStatus">
                                        <option value="${item.id}"
                                                <c:if test="${nginxServiceConfigProxy.projectModuleId==item.id}">selected="selected"</c:if>
                                        >${item.name}</option>
                                    </c:forEach>
                                </select>
                            </div>
                            <div class=" col-md-4 row">
                                <c:if test="${requestScope.projectModuleTypeService.queryProjectModuleTypeById(nginxServiceConfigProxy.projectModuleTypeId).name=='php'}">
                                    <c:set var="targetNodes" value="${requestScope.nginxServiceConfigPhpService.queryNginxServiceConfigPhpsByProjectModuleId(nginxServiceConfigProxy.projectModuleId)}"></c:set>
                                </c:if>
                                <c:if test="${requestScope.projectModuleTypeService.queryProjectModuleTypeById(nginxServiceConfigProxy.projectModuleTypeId).name=='tomcat'}">
                                    <c:set var="targetNodes" value="${requestScope.tomcatServiceConfigService.queryTomcatServiceConfigsByProjectModuleId(nginxServiceConfigProxy.projectModuleId)}"></c:set>
                                </c:if>
                                <c:if test="${requestScope.projectModuleTypeService.queryProjectModuleTypeById(nginxServiceConfigProxy.projectModuleTypeId).name=='tomcatAndHeartbeat'}">
                                    <c:set var="targetNodes" value="${requestScope.tomcatAndHeartbeatServiceConfigService.queryTomcatAndHeartbeatServiceConfigsByProjectModuleId(nginxServiceConfigProxy.projectModuleId)}"></c:set>
                                </c:if>
                                <select name="targetNodeId" class="form-control targetNodeId">
                                    <c:forEach items="${targetNodes}" var="item" varStatus="itemStatus">
                                        <option value="${item.id}"
                                                <c:if test="${item.id==nginxServiceConfigProxy.targetNodeId}">selected="selected"</c:if>
                                        >${item.use}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </td>
                        <td class="use"><input type="text" class="form-control useInput" value="${nginxServiceConfigProxy.use}"></td>
                        <td class="detail text-center">

                            <div class="btn-group">
                                <div class="btn btn-default glyphicon glyphicon-ok nginxServiceConfigProxyUpdate hand"></div>
                                <div class="btn btn-default glyphicon glyphicon-remove nginxServiceConfigProxyDelete hand"></div>
                            </div>

                        </td>
                    </tr>
                </c:forEach>
                <tr class="tr">
                    <td>
                        <input type="checkbox">
                        <span class="number">${nginxServiceConfigProxyStatus.count}</span>
                    </td>
                    <td class="id createSign">空</td>
                    <td class="serverName  hidden">${serverService.queryServerById(service.serverId).name}</td>
                    <td class="serviceName  hidden">${service.name}</td>
                    <td class="front"><input type="text" class="form-control frontInput"></td>
                    <td class="end">
                        <div class=" col-md-3 row">
                            <select name="projectModuleTypeId" class="form-control projectModuleTypeId">
                                <c:forEach items="${requestScope.projectModuleTypes}" var="projectModuleType" varStatus="projectModuleTypeStatus">
                                    <option value="${projectModuleType.id}">${projectModuleType.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <div class=" col-md-3 row">
                            <select name="projectId" class="form-control projectId">
                                <c:forEach items="${requestScope.projectsPhp}" var="project" varStatus="projectStatus">
                                    <option value="${project.id}">${project.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <div class=" col-md-3 row">
                            <select name="projectModuleId" class="form-control projectModuleId">
                                <c:forEach items="${requestScope.projectModulesPhp}" var="projectModule" varStatus="projectModuleStatus">
                                    <option value="${projectModule.id}">${projectModule.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <div class=" col-md-4 row">
                            <select name="targetNodeId" class="form-control targetNodeId">
                                <c:forEach items="${requestScope.nginxServiceConfigPhpsForProxy}" var="nginxServiceConfigPhp" varStatus="nginxServiceConfigPhpStatus">
                                    <option value="${nginxServiceConfigPhp.id}">${nginxServiceConfigPhp.use}</option>
                                </c:forEach>
                            </select>
                        </div>

                    </td>
                    <td class="use"><input type="text" class="form-control useInput"></td>
                    <td class="detail text-center">

                        <div class="btn-group">
                            <div class="btn btn-default glyphicon glyphicon-ok nginxServiceConfigProxyUpdate hand"></div>
                            <div class="btn btn-default glyphicon glyphicon-remove nginxServiceConfigProxyDelete hand"></div>
                        </div>

                    </td>
                </tr>
            </tbody>
        </table><!--proxy代理区-->
    </div>
    <div class="">
        <h1 class="text-center"><span class="red">php/static</span></h1>
        <table  class="table table-striped table-bordered table-hover nginxPhp " style="table-layout:inherit">
            <thead>
            <tr>
                <!--<th><input type="checkbox" id="selectall"> 全选</th>-->
                <th class="col-md-1 "><input type="checkbox" onchange="selectall(this)"> 全选</th>
                <th class="col-md-1">编号</th>
                <th class="col-md-1 hidden">服务器名称</th>
                <th class="col-md-1 hidden">服务名称</th>
                <th class="col-md-2">域名端口</th>
                <th class="col-md-2">目录</th>
                <th class="col-md-1">deployEnv</th>
                <th class="col-md-1">项目</th>
                <th class="col-md-1">模块</th>
                <th class="col-md-1">用途</th>
                <th class="col-md-2 text-center detail ">操作</th>
            </tr>
            </thead>
            <tbody>
                <c:forEach items="${requestScope.nginxServiceConfigPhps}" var="nginxServiceConfigPhp" varStatus="nginxServiceConfigPhpStatus">
                    <tr class="tr">
                        <td>
                            <input type="checkbox">
                            <span class="number">${nginxServiceConfigPhpStatus.count}</span>
                        </td>
                        <td class="id">${nginxServiceConfigPhp.id}</td>
                        <td class="serverName hidden">${serverService.queryServerById(nginxServiceConfigPhp.serverId).name}</td>
                        <td class="serviceName hidden">${serviceService.queryServiceById(nginxServiceConfigPhp.serviceId).name}</td>
                        <td class=""><input type="text" class="form-control domainPort" value="${nginxServiceConfigPhp.domain}:${nginxServiceConfigPhp.port}"></td>
                        <td class=""><input type="text" class="form-control workDirectory" value="${nginxServiceConfigPhp.workDirectory}"></td>
                        <td class="">
                            <select name="deployEnvId" class="form-control deployEnvId">
                                <c:forEach items="${requestScope.deployEnvIds}" var="item" varStatus="itemStatus">
                                    <option value="${item.id}">${item.name}</option>
                                </c:forEach>
                            </select>
                        </td>
                        <td class="">
                            <select name="projectId" class="form-control projectId">
                                <c:forEach items="${requestScope.projectsPhp}" var="item" varStatus="itemStatus">
                                    <option value="${item.id}"
                                            <c:if test="${nginxServiceConfigPhp.projectId==item.id}">selected="selected"</c:if>
                                    >${item.name}</option>
                                </c:forEach>
                            </select>
                        </td>
                        <td class="">
                            <select name="projectModuleId" class="form-control projectModuleId">
                                <c:set var="projectModule" value="${requestScope.projectModuleService.queryProjectModuleById(nginxServiceConfigPhp.projectModuleId)}"></c:set>
                                <c:set var="projectModulesPhp" value="${requestScope.projectModuleService.queryProjectModulesByProjectIdAndProjectModuleTypeId(nginxServiceConfigPhp.projectId,projectModule.projectModuleTypeId)}"></c:set>
                                <c:forEach items="${projectModulesPhp}" var="item" varStatus="itemStatus">
                                    <option value="${item.id}"
                                            <c:if test="${nginxServiceConfigPhp.projectModuleId==item.id}">selected="selected"</c:if>
                                    >${item.name}</option>
                                </c:forEach>
                            </select>
                        </td>
                        <td class=""><input type="text" class="form-control use" value="${nginxServiceConfigPhp.use}"></td>
                        <td class="detail text-center">
                            <div class="btn-group">
                                <div class="btn btn-default glyphicon glyphicon-ok nginxServiceConfigPhpUpdate hand"></div>
                                <div class="btn btn-default glyphicon glyphicon-remove nginxServiceConfigPhpDelete hand"></div>
                            </div>
                        </td>
                    </tr>
                </c:forEach>
                <tr class="tr">
                    <td>
                        <input type="checkbox">
                        <span class="number">${nginxServiceConfigPhpStatus.count}</span>
                    </td>
                    <td class="id createSign">空</td>
                    <td class="serverName hidden">${serverService.queryServerById(nginxServiceConfigPhp.serverId).name}</td>
                    <td class="serviceName hidden">${serviceService.queryServiceById(nginxServiceConfigPhp.serviceId).name}</td>
                    <td class=""><input type="text" class="form-control domainPort" placeholder="域名+port"></td>
                    <td class=""><input type="text" class="form-control workDirectory" placeholder="目录"></td>
                    <td class="">
                        <select name="deployEnvId" class="form-control deployEnvId">
                            <c:forEach items="${requestScope.deployEnvIds}" var="item" varStatus="itemStatus">
                                <option value="${item.id}">${item.name}</option>
                            </c:forEach>
                        </select>
                    </td>
                    <td class="">
                        <select name="projectIdEdit" class="form-control projectId">
                            <c:forEach items="${requestScope.projectsPhp}" var="item" varStatus="itemStatus">
                                <option value="${item.id}">${item.name}</option>
                            </c:forEach>
                        </select>
                    </td>
                    <td class="">
                        <select name="projectModuleIdEdit" class="form-control projectModuleId">
                            <c:set var="projectModulesPhp" value="${requestScope.projectModuleService.queryProjectModulesByProjectIdAndProjectModuleTypeName(requestScope.projectsPhp.iterator().next().id,'php')}"></c:set>
                            <c:forEach items="${projectModulesPhp}" var="item" varStatus="itemStatus">
                                <option value="${item.id}">${item.name}</option>
                            </c:forEach>
                        </select>
                    </td>
                    <td class=""><input type="text" class="form-control use" placeholder="用途"></td>
                    <td class="detail text-center">
                        <div class="btn-group">
                            <div class="btn btn-default glyphicon glyphicon-ok nginxServiceConfigPhpUpdate hand"></div>
                            <div class="btn btn-default glyphicon glyphicon-remove nginxServiceConfigPhpDelete hand"></div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table><!--php工作区-->
    </div>
    <div class="">
        <h1 class="text-center"><span class="red" title="它不能跟proxy合并起来,因为他们的配置文件不同">tcp</span></h1>
        <table class="table table-striped table-bordered table-hover nginxTcpProxy" style="table-layout:inherit">
            <thead>
            <tr>
                <th class="col-md-1 "><input type="checkbox" onchange="selectall(this)"> 全选</th>
                <th class="col-md-1 ">编号</th>
                <th class="col-md-1">服务器名称</th>
                <th class="col-md-1">服务名称</th>
                <th class="col-md-1">前台</th>
                <th class="col-md-1">后台</th>
                <th class="col-md-1">用途</th>
                <th class="col-md-2 text-center detail ">操作
                    <div class="btn btn-default btn-sm glyphicon glyphicon-plus nginxServiceConfigTcpProxyCreate hand"></div>
                </th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${requestScope.nginxServiceConfigTcpProxies}" var="nginxServiceConfigTcpProxy" varStatus="nginxServiceConfigTcpProxyStatus">
                <tr class="tr">
                    <td>
                        <input type="checkbox">
                        <span class="number">${nginxServiceConfigTcpProxyStatus.count}</span>
                    </td>
                    <td class="id">${nginxServiceConfigTcpProxy.id}</td>
                    <td class="serverName">${serverService.queryServerById(nginxServiceConfigTcpProxy.serverId).name}</td>
                    <td class="serviceName">${serviceService.queryServiceById(nginxServiceConfigTcpProxy.serviceId).name}</td>
                    <td class="front">${nginxServiceConfigTcpProxy.frontDomain}:${nginxServiceConfigTcpProxy.frontPort}</td>
                    <td class="end">${nginxServiceConfigTcpProxy.endAddress}:${nginxServiceConfigTcpProxy.endPort}</td>
                    <td class="use">${nginxServiceConfigTcpProxy.use}</td>

                    <td class="detail text-center">

                        <div class="btn-group">
                            <div class="btn btn-default glyphicon glyphicon-pencil nginxServiceConfigTcpProxyEdit hand"></div>
                            <div class="btn btn-default glyphicon glyphicon-ok nginxServiceConfigTcpProxyUpdate hand"></div>
                            <div class="btn btn-default glyphicon glyphicon-remove nginxServiceConfigTcpProxyDelete hand"></div>
                        </div>

                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table><!--tcp代理区-->
    </div>

    <div class="modal fade " id="update" tabindex="-1" role="dialog" aria-labelledby="updateLabel" aria-hidden="true">
        <!--这一区域是用来为update行为提供模态框的-->
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="updateLabel">提交修改</h4>
                </div>
                <div class="modal-body">是否确认?</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="submitUpdate">提交更改</button>
                </div>
            </div>
        </div>
    </div><!--这一区域是用来为update行为提供模态框的-->
    <div class="modal fade " id="delete" tabindex="-1" role="dialog" aria-labelledby="deleteLabel" aria-hidden="true">
        <!--这一区域是用来为delete行为提供模态框的-->
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="deleteLabel">提交删除</h4>
                </div>
                <div class="modal-body">是否确认?</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="submitDelete">提交删除</button>
                </div>
            </div>
        </div>
    </div><!--这一区域是用来为delete行为提供模态框的-->
    <p>config按钮要做成跳转的,在后台拿到配置文件在前台做textarea</p>
</div>
<!--table行-->
</body>
<script>
    $("table").click(function (event) {//detail 操作模块的点击事件,利用冒泡
        let eventTarget = $(event.target);
        if (eventTarget.hasClass('nginxServiceConfigProxyUpdate')) {//此时,已经明确了触发事件的元素是"create"元素,下一步获取整个tr-json对象
            if (eventTarget.closest("tr").find(".form-control").length>0) {
                $("#update").modal("show")
                $('.yaotijiaodedian').remove('yaotijiaodedian')
                $(eventTarget).addClass("yaotijiaodedian")
            } else {
                confirm("没有修改,不能提交")
            }
        }//此时,已经明确了触发事件的元素是"update"元素,下一步获取整个tr-json对象
        if (eventTarget.hasClass('nginxServiceConfigProxyDelete')) {//此时,已经明确了触发事件的元素是"delete"元素,下一步获取整个tr-id
            $("#delete").modal("show")
            $('.yaotijiaodedian').remove('yaotijiaodedian')
            $(eventTarget).addClass("yaotijiaodedian")
        }//此时,已经明确了触发事件的元素是"delete"元素,下一步获取整个tr-id
        if (eventTarget.hasClass('nginxServiceConfigPhpUpdate')) {//此时,已经明确了触发事件的元素是"create"元素,下一步获取整个tr-json对象
            if (eventTarget.closest("tr").find(".form-control").length>0) {
                $("#update").modal("show")
                $('.yaotijiaodedian').remove('yaotijiaodedian')
                $(eventTarget).addClass("yaotijiaodedian")
            } else {
                confirm("没有修改,不能提交")
            }
        }//此时,已经明确了触发事件的元素是"update"元素,下一步获取整个tr-json对象
        if (eventTarget.hasClass('nginxServiceConfigPhpDelete')) {//此时,已经明确了触发事件的元素是"delete"元素,下一步获取整个tr-id
            $("#delete").modal("show")
            $('.yaotijiaodedian').remove('yaotijiaodedian')
            $(eventTarget).addClass("yaotijiaodedian")
        }//此时,已经明确了触发事件的元素是"delete"元素,下一步获取整个tr-id
        if (eventTarget.hasClass('nginxServiceConfigTcpProxyCreate')) {//此时,已经明确了触发事件的元素是"create"元素,下一步获取加一行
            console.log("拼凑tr")
            let trObj=$("<tr>")
            trObj.addClass("tr")
                let tdObjCount=$("<td>")
                    let inputCheckBoxObj=$("<input>")
                        inputCheckBoxObj.attr("type","checkbox")
                        tdObjCount.append(inputCheckBoxObj)
                    let spanObj=$("<span/>")
                        let lastCount=eventTarget.closest("table").children("tbody").children("tr:last").find(".number:first").html()
                        let count=parseInt(lastCount)+1;
                    spanObj.addClass("number")
                    spanObj.html(count)
                tdObjCount.append(spanObj)
            trObj.append(tdObjCount)
                let tdObjId=$("<td>")
                tdObjId.addClass("id").addClass("createSign").addClass("fontSize14")
                // let inputObjId=$("<input>")
                // inputObjId.addClass("form-control").addClass("idEdit")
                // inputObjId.attr("placeholder","新增时不要添加id")
                //tdObjId.append(inputObjId)
                tdObjId.html("id会在创建时自动生成")
            trObj.append(tdObjId)
                let tdObjServer=$("<td>")
                tdObjServer.addClass("serverName")
                tdObjServer.html("${server.name}")
            trObj.append(tdObjServer)
                let tdObjService=$("<td>")
                tdObjService.addClass("serviceName")
                tdObjService.html("${service.name}")
            trObj.append(tdObjService)
                let tdObjFront=$("<td>")
                tdObjFront.addClass("front")
                    let inputObjFront=$("<input>")
                    inputObjFront.addClass("form-control").addClass("frontEdit")
                    inputObjFront.attr("placeholder","如:jnzyk.36ve.com:3306")
                tdObjFront.append(inputObjFront)
            trObj.append(tdObjFront)
                let tdObjEnd=$("<td>")
                tdObjEnd.addClass("end")
                    let inputEnd=$("<input>")
                    inputEnd.addClass("form-control").addClass("endEdit")
                    inputEnd.attr("placeholder","如:1.1.1.1:3306")
                tdObjEnd.append(inputEnd)
            trObj.append(tdObjEnd)
                let tdObjUse=$("<td>")
                tdObjUse.addClass("use")
                    let inputUse=$("<input>")
                    inputUse.addClass("form-control").addClass("useEdit")
                    inputUse.attr("placeholder","如:济宁4.0:mysql")
                tdObjUse.append(inputUse)
            trObj.append(tdObjUse)
                let tdObjDetail=$("<td>")
                tdObjDetail.addClass("detail text-center")
                    let divObjBtnGroup=$("<div/>")
                    divObjBtnGroup.addClass("btn-group ")
                        let divObjEdit=$("<div/>")
                        divObjEdit.addClass("btn btn-default glyphicon glyphicon-pencil nginxServiceConfigTcpProxyEdit hand")
                divObjBtnGroup.append(divObjEdit)
                        let divObjUpdate=$("<div/>")
                        divObjUpdate.addClass("btn btn-default glyphicon glyphicon-ok nginxServiceConfigTcpProxyUpdate hand")
                divObjBtnGroup.append(divObjUpdate)
                        let divObjdelete=$("<div/>")
                        divObjdelete.addClass("btn btn-default glyphicon glyphicon-remove nginxServiceConfigTcpProxyDelete hand")
                divObjBtnGroup.append(divObjdelete)
                tdObjDetail.append(divObjBtnGroup)
            trObj.append(tdObjDetail)
            eventTarget.closest("table").children("tbody").append(trObj)
        }//此时,已经明确了触发事件的元素是"create"元素,下一步获取加一行
        if (eventTarget.hasClass('nginxServiceConfigTcpProxyEdit')) {//此时,已经明确了触发事件的元素是"edit"元素,下一步获取整个tr对象
            let trObj = eventTarget.closest(".tr");//下一步,把tr每一项作为input,等待修改:策略->"td不多,根据class获取td;根据td.innhtml获取text,作为input的value"
            if(trObj.find(".useEdit").length>0){
                return ;
            }
            trObj.children().each(function (index, element) {
                let inputCreate = document.createElement("input");
                inputCreate.className = "form-control"
                switch ($(element).attr("class")) {
                    // case "id":
                    //     console.log("12")
                    //     inputCreate.classList.add("idEdit");
                    //     if(element.innerText==""){
                    //         inputCreate.placeholder = "新增时不要添加id";
                    //     }else{
                    //         inputCreate.value = element.innerText;
                    //     }
                    //     $(element).html('').append(inputCreate);
                    //     break;
                    // case "serverName":
                    //     inputCreate.classList.add("serverNameEdit");
                    //     inputCreate.value = $(element)[0].innerHTML;
                    //     $(element).html('').append(inputCreate);
                    //     break;
                    // case "serviceName":
                    //     inputCreate.classList.add("serviceNameEdit");
                    //     inputCreate.value = element.innerText;
                    //     $(element).html('').append(inputCreate);
                    //     break;
                    case "front":
                        inputCreate.classList.add("frontEdit");
                        inputCreate.value = element.innerText;
                        $(element).html('').append(inputCreate);
                        break;
                    case "end":
                        inputCreate.classList.add("endEdit");
                        inputCreate.value = element.innerText;
                        $(element).html('').append(inputCreate);
                        break;
                    case "use":
                        inputCreate.classList.add("useEdit");
                        inputCreate.value = element.innerText;
                        $(element).html('').append(inputCreate);
                        break;
                    default:
                    // console.log('default')
                }
            })
        }//此时,已经明确了触发事件的元素是"edit"元素,下一步获取整个tr对象
        if (eventTarget.hasClass('nginxServiceConfigTcpProxyUpdate')) {//此时,已经明确了触发事件的元素是"create"元素,下一步获取整个tr-json对象
            if (eventTarget.closest("tr").find(".form-control").length>0) {
                $("#update").modal("show")
                $('.yaotijiaodedian').remove('yaotijiaodedian')
                $(eventTarget).addClass("yaotijiaodedian")
            } else {
                confirm("没有修改,不能提交")
            }
        }//此时,已经明确了触发事件的元素是"update"元素,下一步获取整个tr-json对象
        if (eventTarget.hasClass('nginxServiceConfigTcpProxyDelete')) {//此时,已经明确了触发事件的元素是"delete"元素,下一步获取整个tr-id
            $("#delete").modal("show")
            $('.yaotijiaodedian').remove('yaotijiaodedian')
            $(eventTarget).addClass("yaotijiaodedian")
        }//此时,已经明确了触发事件的元素是"delete"元素,下一步获取整个tr-id
    })//table 的点击事件,利用冒泡

    $("table").change(function (event){
        let eventTarget=$(event.target);
        let trObj=eventTarget.closest(".tr")
        let projectIdObj=trObj.find(".projectId")
        let projectModuleIdObj=trObj.find(".projectModuleId")
        let targetNodeIdObj=trObj.find(".targetNodeId")
        let tableObj=eventTarget.closest("table")

        if(tableObj.attr("class").indexOf("nginxProxy")>=0){
            if(eventTarget.hasClass("projectModuleTypeId")){
                let data={"action":"getProjectsByProjectModuleTypeId","projectModuleTypeId":eventTarget.val()}
                $.ajax({
                    type: "post",
                    url: "<%=basepath%>projectServlet",
                    data: data,
                    success: function (response, status, xhr) {
                        //console.log("收到回信")
                        //console.log(response)
                        projectIdObj.html("")
                        $.each(JSON.parse(response),function (index,element){
                            //console.log(index)
                            //console.log(element.id)
                            let optionObj=$("<option/>")
                            optionObj.val(element.id)
                            optionObj.text(element.name)
                            projectIdObj.append(optionObj)
                        })
                        //console.log(projectModuleIdEditObj)
                    },
                    timeout: 10000, //如果超时1000毫秒，就结束
                    error: function (xhr, errorText, errorType) { //错误后的行为
                        console.log("回信异常")
                        console.log("errorText:" + errorText); //error
                        console.log("errorType:" + errorType); //not found
                        console.log("xhr.status:" + xhr.status); //404
                        console.log("xhr.statusText:" + xhr.statusText); //not found
                    },
                    dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
                })//ajax for php-module
                projectModuleIdObj.html("")
                targetNodeIdObj.html("")
            }
            if(eventTarget.hasClass("projectId")){
                let data={}
                data.action="getProjectModulesByProjectIdAndProjectModuleTypeId"
                data.projectId=eventTarget.val()
                data.projectModuleTypeId=trObj.find(".projectModuleTypeId").val()
                $.ajax({
                    type: "post",
                    url: "<%=basepath%>projectServlet",
                    data: data,
                    success: function (response, status, xhr) {
                        //console.log("收到回信")
                        //console.log(response)
                        //console.log(tdObjProjectModuleId)
                        //console.log(JSON.parse(response));
                        //return
                        projectModuleIdObj.html("")
                        $.each(JSON.parse(response),function (index,element){
                            //console.log(index)
                            //console.log(element.id)
                            let optionObj=$("<option/>")
                            optionObj.val(element.id)
                            optionObj.text(element.name)
                            projectModuleIdObj.append(optionObj)
                        })
                        //console.log(projectModuleIdEditObj)
                    },
                    timeout: 10000, //如果超时1000毫秒，就结束
                    error: function (xhr, errorText, errorType) { //错误后的行为
                        console.log("回信异常")
                        console.log("errorText:" + errorText); //error
                        console.log("errorType:" + errorType); //not found
                        console.log("xhr.status:" + xhr.status); //404
                        console.log("xhr.statusText:" + xhr.statusText); //not found
                    },
                    dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
                })// 根据projectId和moudule type 获取module
            }
            if(eventTarget.hasClass("projectModuleId")){
                let data={}
                data.action="getTargetNodesByProjectModuleId"
                data.projectModuleId=eventTarget.val()
                $.ajax({
                    type: "post",
                    url: "<%=basepath%>serviceServlet",
                    data: data,
                    success: function (response, status, xhr) {
                        //console.log("收到回信")
                        //console.log(response)
                        //console.log(tdObjProjectModuleId)
                        //console.log(JSON.parse(response));
                        //return
                        targetNodeIdObj.html("")
                        $.each(JSON.parse(response),function (index,element){
                            //console.log(index)
                            //console.log(element.id)
                            let optionObj=$("<option/>")
                            optionObj.val(element.id)
                            optionObj.text(element.use)
                            targetNodeIdObj.append(optionObj)
                        })
                        //console.log(projectModuleIdEditObj)
                    },
                    timeout: 10000, //如果超时1000毫秒，就结束
                    error: function (xhr, errorText, errorType) { //错误后的行为
                        console.log("回信异常")
                        console.log("errorText:" + errorText); //error
                        console.log("errorType:" + errorType); //not found
                        console.log("xhr.status:" + xhr.status); //404
                        console.log("xhr.statusText:" + xhr.statusText); //not found
                    },
                    dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
                })// 根据projectId和moudule type 获取module
                targetNodeIdObj.html("")
            }
        }
        if(tableObj.attr("class").indexOf("nginxPhp")>=0){
            if(eventTarget.hasClass("projectId")){
                let data={}
                data.action="getProjectModulesByProjectIdAndProjectModuleTypeName"
                data.projectId=eventTarget.val()
                data.projectModuleTypeName="php"
                $.ajax({
                    type: "post",
                    url: "<%=basepath%>projectServlet",
                    data: data,
                    success: function (response, status, xhr) {
                        //console.log("收到回信")
                        //console.log(response)
                        //console.log(tdObjProjectModuleId)
                        //console.log(JSON.parse(response));
                        //return
                        projectModuleIdObj.html("")
                        $.each(JSON.parse(response),function (index,element){
                            //console.log(index)
                            //console.log(element.id)
                            let optionObj=$("<option/>")
                            optionObj.val(element.id)
                            optionObj.text(element.name)
                            projectModuleIdObj.append(optionObj)
                        })
                        //console.log(projectModuleIdEditObj)
                    },
                    timeout: 10000, //如果超时1000毫秒，就结束
                    error: function (xhr, errorText, errorType) { //错误后的行为
                        console.log("回信异常")
                        console.log("errorText:" + errorText); //error
                        console.log("errorType:" + errorType); //not found
                        console.log("xhr.status:" + xhr.status); //404
                        console.log("xhr.statusText:" + xhr.statusText); //not found
                    },
                    dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
                })// 根据projectId和moudule type 获取module
            }
            if(eventTarget.hasClass("projectModuleId")){
                let data={}
                data.action="getTargetNodesByProjectModuleId"
                data.projectModuleId=eventTarget.val()
                $.ajax({
                    type: "post",
                    url: "<%=basepath%>serviceServlet",
                    data: data,
                    success: function (response, status, xhr) {
                        //console.log("收到回信")
                        //console.log(response)
                        //console.log(tdObjProjectModuleId)
                        //console.log(JSON.parse(response));
                        //return
                        targetNodeIdObj.html("")
                        $.each(JSON.parse(response),function (index,element){
                            //console.log(index)
                            //console.log(element.id)
                            let optionObj=$("<option/>")
                            optionObj.val(element.id)
                            optionObj.text(element.use)
                            targetNodeIdObj.append(optionObj)
                        })
                        //console.log(projectModuleIdEditObj)
                    },
                    timeout: 10000, //如果超时1000毫秒，就结束
                    error: function (xhr, errorText, errorType) { //错误后的行为
                        console.log("回信异常")
                        console.log("errorText:" + errorText); //error
                        console.log("errorType:" + errorType); //not found
                        console.log("xhr.status:" + xhr.status); //404
                        console.log("xhr.statusText:" + xhr.statusText); //not found
                    },
                    dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
                })// 根据projectId和moudule type 获取module
                targetNodeIdObj.html("")
            }
        }

        if(tableObj.attr("class").indexOf("nginxTcpProxy")>=0){

        }


    })

    $("#submitUpdate").click(function () {//这是更新的模态框点击了确定键后搜索数据并提交的过程
        let eventTarget = $('.yaotijiaodedian')
        let data = {};
        let trObj=eventTarget.closest(".tr")
        if(eventTarget.closest("table").hasClass("nginxProxy")){
            //判断是否是新增,是否是update
            if(trObj.find(".id:first").hasClass("createSign")){//说明是新增;新增要带上serviceId
                data["serviceId"]="${service.id}";
            }else{//没有 createSign 标志,表示是更新;更新要带上反向代理id
                data["id"]=trObj.find(".id:first").html()
            }

            data.front=trObj.find(".frontInput").val();
            data.projectModuleTypeId=trObj.find(".projectModuleTypeId").val();

            data.projectId=trObj.find(".projectId").val();
            data.projectModuleId=trObj.find(".projectModuleId").val();
            data.targetNodeId=trObj.find(".targetNodeId").val();
            data.use=trObj.find(".useInput").val();

            if(data.use==""){
                alert("请表明用途")
                return
            }

            $.ajax({
                type: "post",
                url: "<%=basepath%>serviceServlet?action=ajaxConfigService&configType=nginxServiceConfigProxy",
                data: data,
                success: function (response, status, xhr) {
                    console.log("收到回信")
                    console.log(response)
                    if (response == "存入成功") {
                        //console.log("存入成功")
                        location.href = "<%=basepath%>serviceServlet?action=ajaxConfigService&serviceId=${service.id}";
                    } else {
                        alert("存入失败,请看consoleLog");
                    }
                },
                timeout: 10000, //如果超时1000毫秒，就结束
                error: function (xhr, errorText, errorType) { //错误后的行为
                    console.log("回信异常")
                    console.log("errorText:" + errorText); //error
                    console.log("errorType:" + errorType); //not found
                    console.log("xhr.status:" + xhr.status); //404
                    console.log("xhr.statusText:" + xhr.statusText); //not found
                },
                dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
            })//ajax
        }
        if(eventTarget.closest("table").hasClass("nginxPhp")){
            //判断是否是新增,是否是update
            if(trObj.find(".id:first").hasClass("createSign")){//说明是新增;新增要带上serviceId
                data["serviceId"]="${service.id}";
            }else{//没有 createSign 标志,表示是更新;更新要带上反向代理id
                data["id"]=trObj.find(".id:first").html()
            }
            data.domainPort=trObj.find(".domainPort").val();
            data.workDirectory=trObj.find(".workDirectory").val();
            data.use=trObj.find(".use").val();
            data.deployEnvId=trObj.find(".deployEnvId").val();
            data.projectId=trObj.find(".projectId").val();
            data.projectModuleId=trObj.find(".projectModuleId").val();
            //console.log(data);return;
            if(data.workDirectory==""){
                alert("工作目录不能为空")
                throw SyntaxError();
            }
            if(data.use==""){
                alert("请表明用途")
                throw SyntaxError();
            }
            $.ajax({
                type: "post",
                url: "<%=basepath%>serviceServlet?action=ajaxConfigService&configType=nginxServiceConfigPhp",
                data: data,
                success: function (response, status, xhr) {
                    console.log("收到回信")
                    console.log(response)
                    if (response == "存入成功") {
                        //console.log("存入成功")
                        location.href = "<%=basepath%>serviceServlet?action=ajaxConfigService&serviceId=${service.id}";
                    } else {
                        alert("存入失败,请看consoleLog");
                    }
                },
                timeout: 10000, //如果超时1000毫秒，就结束
                error: function (xhr, errorText, errorType) { //错误后的行为
                    console.log("回信异常")
                    console.log("errorText:" + errorText); //error
                    console.log("errorType:" + errorType); //not found
                    console.log("xhr.status:" + xhr.status); //404
                    console.log("xhr.statusText:" + xhr.statusText); //not found
                },
                dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
            })//ajax
        }
        if(eventTarget.closest("table").hasClass("nginxTcpProxy")){
            console.log("tcpProxy")
            //判断是否是新增,是否是update
            if(eventTarget.closest("tr").find(".id:first").hasClass("createSign")){//说明是新增;新增要带上serviceId
                trObj["serviceId"]="${service.id}";
            }else{//没有 createSign 标志,表示是更新;更新要带上反向代理id
                trObj["id"]=eventTarget.closest("tr").find(".id:first").html()
            }
            let arr = ["front", "end", "use"];
            eventTarget.closest("tr").find("input").each(function (index, element) { //构建tr-json对象
                //如果有idEdit,就为id赋值
                // if ($(element).hasClass("idEdit")){
                //     trObj["id"]=$(element).val()
                // }
                for (let i in arr) { //不写这个就要把上面的这个if写5次
                    if ($(element).hasClass(arr[i] + "Edit")) {
                        trObj[arr[i]] = $(element).val()
                    }
                }//不写这个就要把上面的这个if写5次
            })//构建tr-json对象
            console.log(trObj)
            var reg=RegExp(/:/);
            if(reg.test(trObj.front)){

            }else{
                alert("前端配置需要带上端口号")
                return
            }
            if(reg.test(trObj.end)){

            }else{
                alert("后端配置需要带上端口号")
                return
            }
            if(trObj.use==""){
                alert("请表明用途")
                return
            }
            $.ajax({
                type: "post",
                url: "<%=basepath%>serviceServlet?action=ajaxConfigService&configType=nginxServiceConfigTcpProxy",
                data: trObj,
                success: function (response, status, xhr) {
                    console.log("收到回信")
                    console.log(response)
                    if (response == "存入成功") {
                        //console.log("存入成功")
                        location.href = "<%=basepath%>serviceServlet?action=ajaxConfigService&serviceId=${service.id}";
                    } else {
                        alert("存入失败,请看consoleLog");
                    }
                },
                timeout: 10000, //如果超时1000毫秒，就结束
                error: function (xhr, errorText, errorType) { //错误后的行为
                    console.log("回信异常")
                    console.log("errorText:" + errorText); //error
                    console.log("errorType:" + errorType); //not found
                    console.log("xhr.status:" + xhr.status); //404
                    console.log("xhr.statusText:" + xhr.statusText); //not found
                },
                dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
            })//ajax
        }
    })//这是更新的模态框点击了确定键后搜索数据并提交的过程
    $("#submitDelete").click(function () {//这是更新的模态框点击了确定键后搜索数据并提交的过程
        let eventTarget = $('.yaotijiaodedian')
        let trObj = eventTarget.closest(".tr");
        if(eventTarget.closest("table").hasClass("nginxProxy")){
            $.ajax({
                type: "post",
                url: "<%=basepath%>serviceServlet?action=ajaxConfigService&serviceId=${service.id}&delete=true&configType=nginxServiceConfigProxy",
                data: {"id": trObj.children(".id:first").html()},
                success: function (response, status, xhr) {
                    console.log("收到回信")
                    console.log(response)
                    if (response == "删除成功") {
                        location.href = "<%=basepath%>serviceServlet?action=ajaxConfigService&serviceId=${service.id}";
                    } else {
                        alert("删除失败");
                    }
                },
                timeout: 10000, //如果超时1000毫秒，就结束
                error: function (xhr, errorText, errorType) { //错误后的行为
                    console.log("回信异常")
                    console.log("errorText:" + errorText); //error
                    console.log("errorType:" + errorType); //not found
                    console.log("xhr.status:" + xhr.status); //404
                    console.log("xhr.statusText:" + xhr.statusText); //not found
                },
                dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
            })//ajax
        }
        if(eventTarget.closest("table").hasClass("nginxPhp")){
            $.ajax({
                type: "post",
                url: "<%=basepath%>serviceServlet?action=ajaxConfigService&serviceId=${service.id}&delete=true&configType=nginxServiceConfigPhp",
                data: {"id": trObj.children(".id:first").html()},
                success: function (response, status, xhr) {
                    console.log("收到回信")
                    console.log(response)
                    if (response == "删除成功") {
                        location.href = "<%=basepath%>serviceServlet?action=ajaxConfigService&serviceId=${service.id}";
                    } else {
                        alert("删除失败");
                    }
                },
                timeout: 10000, //如果超时1000毫秒，就结束
                error: function (xhr, errorText, errorType) { //错误后的行为
                    console.log("回信异常")
                    console.log("errorText:" + errorText); //error
                    console.log("errorType:" + errorType); //not found
                    console.log("xhr.status:" + xhr.status); //404
                    console.log("xhr.statusText:" + xhr.statusText); //not found
                },
                dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
            })//ajax
        }
        if(eventTarget.closest("table").hasClass("nginxTcpProxy")){
            $.ajax({
                type: "post",
                url: "<%=basepath%>serviceServlet?action=ajaxConfigService&serviceId=${service.id}&delete=true&configType=nginxServiceConfigTcpProxy",
                data: {"id": trObj.children(".id:first").html()},
                success: function (response, status, xhr) {
                    console.log("收到回信")
                    console.log(response)
                    if (response == "删除成功") {
                        location.href = "<%=basepath%>serviceServlet?action=ajaxConfigService&serviceId=${service.id}";
                    } else {
                        alert("删除失败");
                    }
                },
                timeout: 10000, //如果超时1000毫秒，就结束
                error: function (xhr, errorText, errorType) { //错误后的行为
                    console.log("回信异常")
                    console.log("errorText:" + errorText); //error
                    console.log("errorType:" + errorType); //not found
                    console.log("xhr.status:" + xhr.status); //404
                    console.log("xhr.statusText:" + xhr.statusText); //not found
                },
                dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
            })//ajax
        }
    })//这是删除的模态框点击了确定键后搜索数据并提交的过程
</script>
<!--表格点击事件-->
</html>